import React from 'react';
import { createRoot } from 'react-dom/client';
class MouseTracker extends React.Component{
    //给当前的类组件实例添加一个状态，状态是一个对象x=0,y=0
    state = {x:0,y:0}
    handleMouseMove = (event)=>{
        //当我们在DIV移动鼠标的时候，会触发mousemove事件，执行此方法
        //获取鼠标最新的x和y坐标，然后修改并同步状态，改完后页面会自动更新
        this.setState({x:event.clientX,y:event.clientY});
    }
    render(){
        return (
            <div onMouseMove={this.handleMouseMove}>
               {this.props.children(this.state)} 
            </div>
        )
    }
}
let element = (
    <MouseTracker>
        {
           (state)=>(
               <React.Fragment>
                 <h1>请移动鼠标试试</h1>
                 <p>当前鼠标的位置是{state.x}:{state.y}</p>
               </React.Fragment>
           )
        }
    </MouseTracker>
)
let root = createRoot(document.getElementById('root'))
root.render(element);
